<template>
  <section id="main-content">
      <section class="wrapper" v-if="isaddschool">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <div class="border-head">
              <h3>学校列表
                <button class="btn btn-warning schooladd" v-bind:disabled="isRefresh" @click="addSchool(false)">添加</button>
                <button class="btn btn-small btn-theme04 btn-head schooladd" v-bind:disabled="isRefresh" @click="querystateconfirm">更新状态</button>
                <button class="btn btn-success " v-bind:disabled="isRefresh" @click="reflushSchool">刷新</button>
              </h3>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="noinfo" v-if="schoollist==''"><p>没有信息!</p></div>
          <template v-for="school in schoollist">
            <!-- <div class="col-lg-3 col-md-3 col-sm-3 mb">
                <div class="product-panel-2 pn" v-bind:class="[school.isOnline===1 ? isOnLine : isOutLine]">
                <div class="mybadge mybadge-hot-online" v-if="school.isOnline===1">在线</div>
                <div class="mybadge mybadge-hot-outline" v-else>离线</div>
                <img class="imgmt" src="../assets/img/outline.png" width="100" alt="">
                <h4>{{school.schoolName}}</h4>
                <h6>编号：{{school.schoolNumber}}</h6>
                <h6>描述：{{school.information}}</h6>
                <button class="btn btn-small btn-theme04" v-bind:disabled="isRefresh" @click="fanInformation(school.id,school.isOnline)" >控制面板</button>
              </div>
            </div> -->
            <div class="col-lg-3 col-md-3 col-sm-3 mb">
              <div class="steps pn towPlan" v-bind:class="[school.isOnline==1 ? otherOnLine : otherOutLine]">
                <div class="mybadge mybadge-hot-online" v-if="school.isOnline===1">在线</div>
                <div class="mybadge mybadge-hot-outline" v-else>离线</div>
                <img class="imgmt" src="../assets/img/outline.png" width="100" alt="">
                <h4>{{school.schoolName}}</h4>
                <h6>编号：{{school.schoolNumber}}</h6>
                <h6>描述：{{school.information}}</h6>
                <input type="submit" value="控制面板" id="submit" @click="fanInformation(school.id,school.isOnline)">
              </div>
            </div>
          </template>
        </div>
      </section>
      <addschool v-if="!isaddschool" @isadd="addSchool"></addschool>
    </section>
</template>

<script>
  import addschool from './addschool.vue'
  export default {
    name: 'school',
    data () {
      return {
        head_message: '云归谷远程控制系统',
        schoollist:[],
        fanllist:[],
        isRefresh:false,
        isOnLine:'isOnLine',
        isOutLine:'isOutLine',
        otherOnLine:'otherOnLine',
        otherOutLine:'otherOutLine',
        isaddschool:true,
      }
    },
    components: {
      addschool
    },
    mounted () {
      this.schoolInformation()
    },
    methods:{
      reflushSchool(){
        this.isRefresh = true
        this.schoolInformation()
        setTimeout(() =>{
           this.isRefresh = false
        },3000);
      },
      addSchool:function(msg){
        if(msg === true){
          this.schoolInformation();
        }
        this.isaddschool = msg
      },
      schoolInformation:function(){
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        if (!token) {
          this.$router.push({path: '/'})
          return true
        }else{
          var instance = this.$axios.create({
            headers: {'Authorization':token}
          });
          instance.post('ganzi-server/school/schoolInformation')
          .then(function (response) {
            if(response.data.code == '200'){
              if(response.data.data && response.data.data.length>0 ){
                that.schoollist = response.data.data
              }
            }else{
              that.$options.methods.showToast(response.data.msg)
            }
          })
          .catch(function (error) {
            if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.$options.methods.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.$options.methods.showToast('系统异常!')
            }
          });
        }
      }, 
      querystateconfirm(){
        var that = this
        $.confirm({
          title: '提示!',
          content: '该操作会禁用当前页面几秒钟！',
          confirmButton: '继续',
          cancelButton: '取消',
          confirmButtonClass: 'btn-warning',
          cancelButtonClass: 'btn-success',
          backgroundDismiss: false,
          columnClass: 'col-md-4 col-md-offset-4',
          confirm: function(){
            that.querystate()
          },
          cancel: function(){
          }
        })
      },
      querystate:function(){
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        if (!token) {
          this.$router.push({path: '/'})
          return true
        }else{
          that.isRefresh = true
          var instance = this.$axios.create({
            headers: {'Authorization':token}
          });
          instance.post('ganzi-server/sendMessageToSchool/querystate')
          .then(function (response) {
            if(response.data.code == '200'){
                that.showQuery()
            }else{
              that.showToast(response.data.msg)
              that.isRefresh = false
            }
          })
          .catch(function (error) {
            if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.$options.methods.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.$options.methods.showToast('系统异常!')
            }
            that.isRefresh = false
          });
        }
      },
      fanInformation:function(id,online){
        this.isRefresh = true
        var that = this
        if(id){
          if(online != 1){
            $.confirm({
                title: '提示!',
                content: '学校处于离线状态,指令将会发送失败!',
                confirmButton: '确定',
                cancelButton: '取消',
                confirmButtonClass: 'btn-warning',
                cancelButtonClass: 'btn-success',
                backgroundDismiss: false,
                confirm: function(){
                  sessionStorage.setItem('schoolId',id)
                  sessionStorage.setItem('schoolState',2)
                  that.$router.push({name: 'fan', params: { schoolId:id}})
                },
                cancel: function(){
                }
            })
          }else{
            sessionStorage.setItem('schoolId',id)
            sessionStorage.setItem('schoolState',1)
            this.$router.push({name: 'fan', params: { schoolId:id}})
          }
        }else{
          that.$options.methods.showToast('学校ID为空!')
        }
        this.isRefresh = false
      },
      showToast:function(msg){
        $.alert({
          title: '消息!',
          content: msg,
          confirmButton: '确定',
          confirmButtonClass: 'btn-warning',
          backgroundDismiss: false,
          confirm: function(){
          }
        });
      },
      showQuery(){
        var that = this
        $.confirm({
          icon: 'fa fa-spinner fa-spin',
          title: ' ',
          content: '加载中...',
          cancelButton: false,
          confirmButton: '.',
          confirmButtonClass: 'btn-default disable-button',
          backgroundDismiss: false,
          columnClass: 'col-md-4 col-md-offset-4',
          autoClose: 'confirm|8000',
          confirm: function(){
            that.schoolInformation()
            that.isRefresh = false
          }
        })
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/jquery.gritter.css";
  @import "../assets/css/school.css";
</style>
